import { View, Text, Image } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { useState } from 'react';
import classNames from 'classnames';
import axios from '@/request/index'
import AnswerModal from './answerModal'

import './index.scss'

export default function News() {
  const [visible, setVisible] = useState(true)
  const [answerFinish, setAnswerFinish] = useState(false)
  const [failVisible, setFailVisible] = useState(false)
  const [medalVisible, setMedalVisible] = useState(false)
  const [questionData, setQuestionData] = useState()
  const [tab, setTab] = useState(0)
  // 勋章数量
  const [count, setCount] = useState(0)

  // const [list, setList] = useState<any[]>([])

  useLoad(() => {
    console.log('Page loaded.')
  })

  const initList = async () => {
    const res = await axios.get('/subject/isHavePrize',{})
    if (res && res.data) {
      setCount(Number(res.data))
    }
  }

  useDidShow(() => {
    initList()
  });

  const onClickRules = () => {
    setVisible(true)
  }
  const onClickClose = () => {
    setVisible(false);
    setAnswerFinish(false);
    setMedalVisible(false);
    setFailVisible(false);
  }
  const onClickTab = (val: number) => {
    setTab(val);
    if (val === 1) {
      onClickClose()
      setMedalVisible(true);
    } else {
      onClickClose()
      setVisible(true);
    }
  }

  const onSelectQuestion = async (_index?: number) => {
    // Taro.navigateTo({
    //   url: `/pages/HomeFunnyAnswerDetail/index?index=${index}`
    // })
    const res = await axios.get('/subject/answerInterface', {
      params: {
      }
    })
    if (res && res.data) {
      // setList(res.data)
      const newData = res.data.map((item: any) =>{
        item.answers = item.answers.map((answer: any) =>{
          return {
            ...answer,
            checked: false
          }
        })
        return item;
      })
      setQuestionData(newData);
    }
  }

  const onClickExist = () => {
    setQuestionData(undefined);
  }
  const onClickSubmitSuccess = (val) => {
    // debugger
    setQuestionData(undefined);
    setAnswerFinish(true);
  }
  const onClickSubmitFail = () => {
    // debugger
    setQuestionData(undefined);
    setFailVisible(true);
  }


  return (
    <View className='answer flex flex-col bg-[#F5F5F5] min-h-screen pb-[180px] relative'>
      <View className='text-[36px] text-[#000] absolute top-2 right-2 z-10'
        onClick={onClickRules}>
        答题规则
      </View>
      {
        (visible || answerFinish) &&
        <ModalView
          content={visible ?
            '随机选择气球，回答里面的题目（共5题），回答正确即可获得勋章。'
            :
            '恭喜你全对啦!获得疫苗全能勋章'}
          btnText={visible ? '开始答题' : '再来一次'}
          submit={onClickClose}
        />
      }
      {
        failVisible &&
        <ModalView
          content='很遗憾你与勋章擦肩而过，再试试吧~~~'
          btnText='再试一次'
          submit={onClickClose}
        />
      }
      {
        (medalVisible) &&
        <MedalView
          count={count}
          content={count
            ?
            '这是对于你知识储备的肯定，只有全对并对疫苗接种知识储备完善的人才有获得的资格'
            :
            '您还未解锁，快答题试试看吧'}
          submit={onClickClose}
        />
      }
      <View className='flex-1 relative h-full'>
        <Image onClick={() => onSelectQuestion(1)} src={require('./images/ballon1.png')} className='w-[110px] h-[106px] absolute left-[62px] top-[38px]' />
        <Image onClick={() => onSelectQuestion(2)} src={require('./images/ballon2.png')} className='w-[134px] h-[116px] absolute left-[252px] top-[78px]' />
        <Image onClick={() => onSelectQuestion(3)} src={require('./images/ballon3.png')} className='w-[130px] h-[104px] absolute right-[52px] top-[138px]' />
        <Image onClick={() => onSelectQuestion(4)} src={require('./images/ballon4.png')} className='w-[82px] h-[64px] absolute left-[52px] top-[238px]' />
        <Image onClick={() => onSelectQuestion(5)} src={require('./images/ballon5.png')} className='w-[32px] h-[32px] absolute right-[252px] top-[238px]' />
        <Image onClick={() => onSelectQuestion(6)} src={require('./images/ballon6.png')} className='w-[48px] h-[44px] absolute left-[82px] top-[368px]' />
        <Image onClick={() => onSelectQuestion(7)} src={require('./images/ballon7.png')} className='w-[84px] h-[76px] absolute right-[382px] top-[298px]' />
        <Image onClick={() => onSelectQuestion(8)} src={require('./images/ballon8.png')} className='w-[84px] h-[76px] absolute right-[62px] top-[328px]' />
        <Image onClick={() => onSelectQuestion(9)} src={require('./images/ballon9.png')} className='w-[112px] h-[106px] absolute left-[82px] top-[528px]' />
        <Image onClick={() => onSelectQuestion(10)} src={require('./images/ballon10.png')} className='w-[112px] h-[104px] absolute left-[266px] top-[628px]' />
        <Image onClick={() => onSelectQuestion(11)} src={require('./images/ballon11.png')} className='w-[198px] h-[166px] absolute right-[82px] top-[628px]' />
        <Image onClick={() => onSelectQuestion(12)} src={require('./images/ballon12.png')} className='w-[80px] h-[70px] absolute left-[82px] top-[828px]' />
        <Image onClick={() => onSelectQuestion(13)} src={require('./images/ballon13.png')} className='w-[76px] h-[72px] absolute right-[332px] bottom-40' />
        <Image onClick={() => onSelectQuestion(14)} src={require('./images/ballon14.png')} className='w-[40px] h-[44px] absolute right-8 top-[928px]' />
        <Image onClick={() => onSelectQuestion(15)} src={require('./images/ballon15.png')} className='w-[130px] h-[120px] absolute left-6 bottom-20' />
        <Image onClick={() => onSelectQuestion(16)} src={require('./images/ballon16.png')} className='w-[170px] h-[158px] absolute left-[50%] -translate-x-[50%] bottom-14' />
        <Image onClick={() => onSelectQuestion(17)} src={require('./images/ballon17.png')} className='w-[116px] h-[104px] absolute right-0 bottom-10' />
      </View>
      <View className='fixed bottom-20 left-0 right-0 flex flex-row items-center justify-center z-10'>
        <View
          className={classNames(
            'w-[250px] h-[60px] text-center text-[24px] leading-[60px] rounded-tl-[8px] rounded-bl-[8px]',
            tab === 0 ? ' text-white bg-[#5959F8]' : 'text-[#5959F8] bg-white border border-[#5959F8] box-border'
          )}
          onClick={() => onClickTab(0)}
        >游戏界面</View>
        <View
          className={classNames(
            'w-[250px] h-[60px] text-center text-[24px] leading-[60px] rounded-tr-[8px] rounded-br-[8px]',
            tab === 1 ? ' text-white bg-[#5959F8]' : 'text-[#5959F8] bg-white border border-[#5959F8] box-border'
          )}
          onClick={() => onClickTab(1)}
        >我的勋章</View>
      </View>
      {
        questionData &&
        <AnswerModal 
          onClickExist={onClickExist} 
          onClickSubmitSuccess={onClickSubmitSuccess}
          onClickSubmitFail={onClickSubmitFail}
          data={questionData} />
      }
    </View>
  )
}
// 其他弹窗
const ModalView = (props: { content: string, btnText: string, submit: () => void }) => {

  const { content, btnText, submit } = props;
  const onClickClose = () => {
    // setVisible(false);
    submit && submit();
  }
  return (
    <View className='fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.3)] flex items-center justify-center z-10'>
      <View className='px-2 mx-4 bg-[#B8F3FF]'>
        <View className='relative flex items-center justify-center h-[90px] border-b border-[#146780]'>
          <Text className='text-[#333] text-[40px]'>
            答题规则
          </Text>
          <Image
            src={require('./images/close.png')}
            onClick={onClickClose}
            className='w-[36px] h-[36px] absolute right-2 top-3' />
        </View>
        <View className='p-[20px]'>
          <View className='text-[#014743] text-[48px] leading-[60px]'>
            {/* 随机选择气球，回答里面的题目（共5题），回答正确即可获得勋章。 */}
            {content}
          </View>
          <View className='flex items-center justify-center'>
            <Image src={require('./images/logo.png')} className='w-[320px] h-[208px]' />
          </View>
          <View className='flex items-center justify-center mt-3'>
            <View onClick={onClickClose} className='text-[#FFFFFF] text-center text-[48px] leading-[126px] rounded-[32px] overflow-hidden bg-[#29CDBA] w-[340px] h-[126px] border border-[#BEF7F7] box-border'>
              {/* 开始答题 */}
              {btnText}
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}
// 我的勋章弹窗
const MedalView = (props: { content: string, count: number, submit: () => void }) => {

  const { content, count, submit } = props;
  const onClickClose = () => {
    // setVisible(false);
    submit && submit();
  }
  return (
    <View className='fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.3)] flex items-center justify-center z-10'>
      <View className='px-2 mx-4 bg-[#B8F3FF]'>
        <View className='relative flex items-center justify-center h-[90px] border-b border-[#146780]'>
          <Text className='text-[#333] text-[40px]'>
            我的勋章
          </Text>
          <Image
            src={require('./images/close.png')}
            onClick={onClickClose}
            className='w-[36px] h-[36px] absolute right-2 top-3' />
        </View>
        <View className='p-[20px]'>
          <View className='flex items-center justify-center'>
            <Image src={count > 0 ? require('./images/yes_logo.png') : require('./images/no_logo.png')} className='w-[320px] h-[208px]' />
          </View>
          <View className='text-[#014743] text-[48px] leading-[60px]'>
            {/* 随机选择气球，回答里面的题目（共5题），回答正确即可获得勋章。 */}
            {content}
          </View>
        </View>
      </View>
    </View>
  )
}
